<!DOCTYPE html>
<html lang="en">

<head>
  <base href="." />
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <title>XSIGN</title>
  <script src="./public/pdf.js/pdf.min.mjs" type="module"></script>
  <script src="./public/xsign.umd.cjs" defer></script>
  <!-- <script src="./public/download.min.js"></script> -->
  <style>
    html,
    body {
      width: 100vw;
      height: 100vh;
      margin: 0;
      overflow: hidden;
      font-size: 16px;
    }

    .page {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      user-select: none;
    }

    .page .header {
      flex-shrink: 0;
      height: 3rem;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 0.5rem;
      box-shadow: 0 0 2px #AAA;
      z-index: 1;
    }

    .page .header .icon-btn {
      height: 36px;
      width: 48px;
      margin-left: 0.2rem;
      transition: 0.1s;
      pointer-events: none;
      cursor: pointer;
    }

    .page .header .icon-btn svg {
      height: 100%;
      width: 100%;
      fill: #999;
    }

    .page .header .icon-btn.active {
      pointer-events: all;
    }

    .page .header .icon-btn.active svg {
      fill: #5970C6;
    }

    .page .header .icon-btn:active svg {
      transform: scale(1.1);
    }

    .page .header .icon-btn.redo svg {
      transform: scaleX(-1);
    }

    .page .header .icon-btn.redo:active svg {
      transform: scale(-1.1, 1.1);
    }

    .page .header .checkbox {
      display: flex;
      align-items: center;
      font-size: 0.9rem;
      color: #444;
    }

    .page .header .checkbox input {
      margin-left: 0.5rem;
      cursor: pointer;
    }

    .page .header .checkbox.is-mouse,
    .page .header .checkbox.is-download {
      margin-right: 8px;
    }

    .page .header .checkbox.is-readonly {
      margin-right: auto;
    }

    .page .header .is-download input {
      margin-left: 0.5rem;
    }

    .page .header .submit-btn {
      background-color: #5970C6;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      line-height: 1;
      height: 32px;
      white-space: nowrap;
      cursor: pointer;
      color: #FFF;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      transition: 0.1s;
      font-weight: 500;
      user-select: none;
      vertical-align: middle;
      padding: 8px 15px;
      font-size: 0.8rem;
      border-radius: 4px;
      margin-left: 0.5rem;
    }

    .page .header.loading {
      pointer-events: none;
      opacity: 0.5;
    }

    .page .workspace {
      display: flex;
      flex-grow: 1;
      overflow: hidden;
    }

    .page .workspace .paper-wrapper {
      flex-grow: 1;
      overflow: hidden;
    }

    .page .workspace .settings {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1rem 0.5rem;
      box-shadow: 0 0 2px #AAA;
      width: 2rem;
      z-index: 200;
      overflow: hidden;
    }

    .page .workspace .settings.loading {
      pointer-events: none;
      opacity: 0.5;
    }

    .page .workspace .settings-group {
      display: flex;
      flex-direction: column;
      margin-bottom: 1.5rem;
    }

    .page .workspace .settings-group span {
      width: 1rem;
      height: 1rem;
      margin-bottom: 0.2rem;
      cursor: pointer;
    }

    .page .workspace .settings-brush .brush {
      height: 32px;
      color: #999;
      margin-bottom: 8px;
    }

    .page .workspace .settings-brush .brush.active {
      color: var(--active-color);
      transform: scale(1.2);
    }

    .page .workspace .settings-brush .brush.active.eraser {
      color: #ff5e8c;
    }

    .page .workspace .settings-brush .brush svg {
      height: 32px;
      cursor: pointer;
    }

    .page .workspace .settings-color span {
      border-radius: 5px;
      border: 0.2rem solid #000;
      margin-bottom: 0.5rem;
    }

    .page .workspace .settings-color span.active {
      transform: scale(1.2);
    }

    .page .workspace .settings-color span:nth-child(1) {
      border-color: #000;
    }

    .page .workspace .settings-color span:nth-child(1).active {
      background-color: #000;
    }

    .page .workspace .settings-color span:nth-child(2) {
      border-color: #F00;
    }

    .page .workspace .settings-color span:nth-child(2).active {
      background-color: #F00;
    }

    .page .workspace .settings-color span:nth-child(3) {
      border-color: #00F;
    }

    .page .workspace .settings-color span:nth-child(3).active {
      background-color: #00F;
    }

    .page .workspace .settings-size {
      width: 100%;
    }

    .page .workspace .settings-size span {
      background-color: #000;
      margin-bottom: 0.5rem;
      opacity: 0.3;
      width: 100%;
    }

    .page .workspace .settings-size span.active {
      opacity: 1;
    }

    .page .workspace .settings-size span:nth-child(1) {
      height: 0.5rem;
      border-radius: 0.25rem;
      margin-bottom: 0.7rem;
    }

    .page .workspace .settings-size span:nth-child(2) {
      height: 0.7rem;
      border-radius: 0.35rem;
      margin-bottom: 0.6rem;
    }

    .page .workspace .settings-size span:nth-child(3) {
      height: 1rem;
      border-radius: 0.5rem;
    }
  </style>
</head>

<body>
  <div class="page">
    <div class="header" id="header">
      <!-- <div class="checkbox is-mouse">
        鼠标:
        <input type="checkbox" id="with-mouse">
      </div>
      <div class="checkbox is-download">
        下载:
        <input type="checkbox" id="download">
      </div>
      <div class="checkbox is-readonly">
        只读:
        <input type="checkbox" id="readonly">
      </div> -->
      <div class="icon-btn undo" onclick="onUndo()" id="undo">
        <svg viewBox="0 0 1137 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
          <path
            d="M489.244444 568.888889l60.681482 75.851852H265.481481l64.474075-265.481482 60.681481 72.05926c34.133333-30.340741 109.985185-68.266667 238.933333-68.266667 201.007407 0 280.651852 204.8 280.651852 204.8S792.651852 455.111111 663.703704 455.111111c-98.607407 0-155.496296 75.851852-174.45926 113.777778z">
          </path>
        </svg>
      </div>
      <div class="icon-btn redo" onclick="onRedo()" id="redo">
        <svg viewBox="0 0 1137 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
          <path
            d="M489.244444 568.888889l60.681482 75.851852H265.481481l64.474075-265.481482 60.681481 72.05926c34.133333-30.340741 109.985185-68.266667 238.933333-68.266667 201.007407 0 280.651852 204.8 280.651852 204.8S792.651852 455.111111 663.703704 455.111111c-98.607407 0-155.496296 75.851852-174.45926 113.777778z">
          </path>
        </svg>
      </div>
      <div class="submit-btn" onclick="onExport()">确认签批</div>
    </div>
    <div class="workspace">
      <div class="paper-wrapper" id="paper">
      </div>
      <div class="settings" id="setting">
        <div class="settings-group settings-brush" id="brush">
          <div class="brush pen active">
            <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"
              fill="currentColor">
              <path
                d="M734.4 622.4c-24 0-49.6-9.6-67.2-28.8L430.4 358.4c-35.2-35.2-38.4-89.6-6.4-128L569.6 49.6c6.4-6.4 14.4-11.2 24-11.2s17.6 3.2 24 9.6l361.6 361.6c6.4 6.4 9.6 16 9.6 24 0 9.6-4.8 17.6-11.2 24L796.8 603.2c-20.8 12.8-41.6 19.2-62.4 19.2z m-24-73.6c11.2 11.2 30.4 12.8 43.2 1.6l153.6-123.2-312-310.4L472 270.4c-9.6 12.8-9.6 30.4 1.6 43.2l236.8 235.2z">
              </path>
              <path
                d="M118.4 937.6c-8 0-16-3.2-22.4-9.6-6.4-6.4-9.6-14.4-9.6-24l11.2-440c0-14.4 9.6-25.6 22.4-30.4l350.4-102.4c11.2-3.2 24 0 32 8L683.2 520c8 8 11.2 20.8 8 32L588.8 902.4c-3.2 12.8-16 22.4-30.4 22.4l-440 12.8z m41.6-448l-9.6 384 384-9.6L624 553.6 470.4 400 160 489.6z">
              </path>
              <path
                d="M353.6 766.4c-25.6 0-49.6-9.6-67.2-28.8-17.6-17.6-28.8-41.6-28.8-67.2s9.6-49.6 28.8-67.2c17.6-17.6 41.6-28.8 67.2-28.8s49.6 9.6 67.2 28.8c17.6 17.6 28.8 41.6 28.8 67.2s-9.6 49.6-28.8 67.2c-17.6 19.2-41.6 28.8-67.2 28.8z m0-128c-8 0-16 3.2-22.4 9.6-6.4 6.4-9.6 14.4-9.6 22.4s3.2 16 9.6 22.4c12.8 12.8 33.6 12.8 44.8 0 6.4-6.4 9.6-14.4 9.6-22.4s-3.2-16-9.6-22.4c-6.4-6.4-14.4-9.6-22.4-9.6z"
                p-id="32041"></path>
              <path
                d="M140.8 915.2c-8 0-16-3.2-22.4-9.6-12.8-12.8-12.8-32 0-44.8l168-168c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8l-168 168c-6.4 6.4-14.4 9.6-22.4 9.6z">
              </path>
            </svg>
          </div>
          <div class="brush eraser">
            <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200"
              fill="currentColor">
              <path
                d="M980.9 424.1c12.5-12.5 12.5-32.8 0-45.29999999L636.7 34.6c-12.5-12.5-32.8-12.5-45.3 0L90.5 535.5c-50.00000001 50.00000001-50.00000001 131 0 181l272 270.30000001c24 23.8 56.40000001 37.20000001 90.2 37.19999999H864c17.7 0 32-14.3 32-32 0-8.8-3.59999999-16.8-9.4-22.6-5.8-5.8-13.8-9.4-22.6-9.39999999H599.5c-57 0-85.6-68.9-45.3-109.30000001l426.7-426.6zM434.80000001 879.7c-25 25-65.5 25-90.50000001 0L135.8 671.3c-25-25-25-65.5 0-90.5l127.9-127.9 299 299-127.89999999 127.8z">
              </path>
            </svg>
          </div>
        </div>
        <div class="settings-group settings-color" id="color">
          <span class="active"></span>
          <span></span>
          <span></span>
        </div>
        <div class="settings-group settings-size" id="size">
          <span></span>
          <span class="active"></span>
          <span></span>
        </div>
      </div>
    </div>
  </div>
  <script>
    let paper
    let penType = 0
    let strokeColor = '#000'
    let lineWidth = 6

    document.body.addEventListener('touchmove', evt => {
      if (evt.touches[0].force < 1) {
        evt.preventDefault()
      }
    }, {
      passive: false,
    })

    window.addEventListener('DOMContentLoaded', () => {
      pdfjsLib.GlobalWorkerOptions.workerSrc = 'public/pdf.js/pdf.worker.min.mjs'
    })

    async function load(url = 'public/test.pdf') {
      const headerDom = document.getElementById('header')
      const mouseDom = document.getElementById('with-mouse')
      const readonlyDom = document.getElementById('readonly')
      const undoDom = document.getElementById('undo')
      const redoDom = document.getElementById('redo')
      const paperDom = document.getElementById('paper')
      const settingDom = document.getElementById('setting')
      const brushDom = document.getElementById('brush')
      const colorDom = document.getElementById('color')
      const sizeDom = document.getElementById('size')

      for (let i = 0; i < brushDom.children.length; i++) {
        const dom = brushDom.children.item(i)
        dom.onclick = () => {
          penType = [0, 100][i]
          paper.penType = penType
          brushDom.childNodes.forEach(v => v.classList?.remove('active'))
          dom.classList.add('active')
        }
      }
      for (let i = 0; i < colorDom.children.length; i++) {
        const dom = colorDom.children.item(i)
        dom.onclick = () => {
          strokeColor = ['#000000', '#FF0000', '#0000FF'][i]
          paper.strokeColor = strokeColor
          colorDom.childNodes.forEach(v => v.classList?.remove('active'))
          dom.classList.add('active')
          brushDom.children.item(0).style.cssText = '--active-color:' + strokeColor
        }
      }
      for (let i = 0; i < sizeDom.children.length; i++) {
        const dom = sizeDom.children.item(i)
        dom.onclick = () => {
          lineWidth = [2, 3, 5][i]
          paper.lineWidth = lineWidth
          sizeDom.childNodes.forEach(v => v.classList?.remove('active'))
          dom.classList.add('active')
        }
      }

      paper = new XSign(paperDom, url)
      paper.on('change', (u, r, l) => {
        // 撤回
        if (u) {
          undoDom.classList.add('active')
        } else {
          undoDom.classList.remove('active')
        }
        // 重做
        if (r) {
          redoDom.classList.add('active')
        } else {
          redoDom.classList.remove('active')
        }
        // loading 状态
        if (l) {
          headerDom.classList.add('loading')
          settingDom.classList.add('loading')
        } else {
          headerDom.classList.remove('loading')
          settingDom.classList.remove('loading')
        }
      })
      paper.on('tap', (contents) => {
        console.log(contents)
        alert('点击了 ' + (contents.name || contents.id))
      })

      // mouseDom?.onchange = (v) => {
      //   paper.withMouse = mouseDom.checked
      // }
      // readonlyDom?.onchange = (v) => {
      //   paper.readonly = readonlyDom.checked
      // }
    }
    function onUndo() {
      paper?.undo()
    }
    function onRedo() {
      paper?.redo()
    }
    async function onExport() {
      const [blob, url] = await paper?.save({ name: '老赵', id: '2' })
      let reader = new FileReader()
      reader.readAsDataURL(blob)
      reader.onloadend = function () {
        const base64String = reader.result
        AndroidWebView.onSave(base64String)
      }
    }
  </script>
</body>

</html>